import React from 'react';
import {Row, Col, Button} from 'antd';
import Coverflow from 'react-coverflow';
import NeedLogin from '../components/NeedLogin';

import drill1 from '../images/drill1.jpg';
import drill2 from '../images/drill2.jpg';
import drill3 from '../images/drill3.jpg';
import drill4 from '../images/drill4.jpg';
import drill5 from '../images/drill5.jpg';

const males = [
  {src: drill1, alt: '公头设计案例', action: '/#/design'},
  {src: drill2, alt: '公头设计案例', action: '/#/design'},
  {src: drill3, alt: '公头设计案例', action: '/#/design'},
  {src: drill4, alt: '公头设计案例', action: '/#/design'},
  {src: drill5, alt: '公头设计案例', action: '/#/design'},
  {src: drill1, alt: '公头设计案例', action: '/#/design'},
];

const females = [
  {src: drill5, alt: '母头设计案例', action: '/#/design'},
  {src: drill4, alt: '母头设计案例', action: '/#/design'},
  {src: drill3, alt: '母头设计案例', action: '/#/design'},
  {src: drill2, alt: '母头设计案例', action: '/#/design'},
  {src: drill1, alt: '母头设计案例', action: '/#/design'},
  {src: drill5, alt: '母头设计案例', action: '/#/design'},
];

const DemoBox = props => <p className={`height-${props.value}`}>{props.children}</p>;

export default class HomePage extends React.Component {

  render() {
    return (
      <NeedLogin>
        <Coverflow width="960" height="400"
                 displayQuantityOfSide={3}
                 navigation={false}
                 enableScroll={true}>
          {males.map((m) =>
            <img src={m.src} key={m.src} alt={m.alt} data-action={m.action}/>
          )}
        </Coverflow>

        <br /> <br /> <br /> <br />

        <Coverflow width="960" height="400"
                 displayQuantityOfSide={3}
                 navigation={false}
                 enableScroll={true}>
          {females.map((m) =>
            <img src={m.src} key={m.src} alt={m.alt} data-action={m.action}/>
          )}
        </Coverflow>

        <br /> <br /> <br /> <br />

        <Row type="flex" justify="space-around" align="middle" >
          <Col>
            <Button type="default" style={{width: 300, height: 80, fontSize: '2.5em'}} onClick={(e) => window.location.href='/#/design'}>公头设计</Button>
          </Col>
          <Col>
            <Button type="default" style={{width: 300, height: 80, fontSize: '2.5em'}} onClick={(e) => window.location.href='/#/design'}>母头设计</Button>
          </Col>
        </Row>

        <br /> <br /> <br /> <br />

      </NeedLogin>
    );
  }
}
